<template>
  <div id="address-list">
    <div class="top">
      <div class="backIcon">
        <div class="img" @click="goto()">
          <i
            ><svg
              t="1734438094479"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4260"
              width="16"
              height="16"
            >
              <path
                d="M305.519192 557.640404c-11.636364 0-23.40202-4.39596-32.323232-13.317172-17.842424-17.842424-17.842424-46.674747 0-64.517171L683.830303 69.30101c17.842424-17.842424 46.674747-17.842424 64.517172 0 17.842424 17.842424 17.842424 46.674747 0 64.517172L337.713131 544.323232c-8.921212 8.921212-20.557576 13.317172-32.193939 13.317172z m0 0"
                fill="#515151"
                p-id="4261"
              ></path>
              <path
                d="M715.894949 968.145455c-11.636364 0-23.40202-4.39596-32.323232-13.317172L273.19596 544.323232c-17.842424-17.842424-17.842424-46.674747 0-64.517171 17.842424-17.842424 46.674747-17.842424 64.517171 0l410.505051 410.50505c17.842424 17.842424 17.842424 46.674747 0 64.517172-8.921212 8.921212-20.557576 13.317172-32.323233 13.317172z m0 0"
                fill="#515151"
                p-id="4262"
              ></path></svg
          ></i>
        </div>
      </div>
      <div class="title">
        <div class="text">
          <span>地址编辑</span>
        </div>
      </div>
    </div>
    <div class="box">
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        :disabled-list="disabledList"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
      />
      <button @click="onClick()">新增地址</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'
const router = useRouter()
// 获取本地中的address
// const address = localStorage.getItem('address')
const goto = () => {
  router.go(-1)
}
const onClick = () => {
  router.push('/address')
}
const chosenAddressId = ref('1')
const list = ref([
  {
    id: '1',
    name: '张三',
    tel: '13000000000',
    address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
    isDefault: true,
  },
  {
    id: '2',
    name: '李四',
    tel: '1310000000',
    address: '浙江省杭州市拱墅区莫干山路 50 号',
  },
])

const disabledList = ref([])
onMounted(() => {
  const addressStr = localStorage.getItem('address')

  const address = JSON.parse(addressStr)
  console.log(address)
  address['id'] = 3

  if (address) {
    list.value.push({
      id: '3',
      name: address.name,
      tel: address.tel,
      address: address.province + address.city + address.county,
    })
  }
})

const onAdd = () => showToast('新增地址')
const onEdit = (item, index) => showToast('编辑地址:' + index)
</script>

<style lang="less" scoped>
#address-list {
  .top {
    height: 42rem;
    width: 375rem;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 0;
    position: relative;
    .backIcon {
      height: 42rem;
      z-index: 100;
      position: absolute;
      left: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding-left: 14rem;
    }
    .title {
      max-width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 100%;
      font-size: 17rem;
      color: #333;
      font-weight: 700;
      height: 100%;
      width: 100vw;
    }
  }
  .box {
    z-index: 100;
  }
}
</style>